import { Component } from '../../../components/base-component';
import { Button } from '../../../components/button';
import { Input } from '../../../components/input';
import './form.css';

export class Form extends Component {
  private wrapperField = new Component({ tag: 'div', className: 'garage__field-wrapper' });

  private button = new Button({ className: 'button', text: '' });

  private input = new Input({ className: 'garage__input' });

  private inputColor = new Input({ className: 'garage__create-color', type: 'color' });

  constructor(buttonText: string) {
    super({ tag: 'form', className: 'garage__form' });

    this.button.setTextContent(buttonText);

    this.wrapperField.appendChildren([this.input, this.inputColor, this.button]);

    this.append(this.wrapperField);
  }

  formSubmit(callback: (e: Event) => void) {
    this.node.addEventListener('submit', callback);
  }

  getInputsValue() {
    return { name: this.input.getNode().value, color: this.inputColor.getNode().value };
  }
}
